<template>
    <div class = "city">
        <!-- 输入城市名进行搜素 -->
        <div class = "key_city">
            <div class = "key_input"> 
                <div class = "key_img">
                    <img src="@/assets/images/key.png" alt="">
                </div>
                <input type="text" placeholder="请输入城市名称"> 
            </div>
            <aside>
                取消
            </aside>
        </div>
        <div class = "now_city">
            <aside>
                当前位置
                <span>青岛</span>
            </aside>
            <router-link
                to="/Map"
                tag='artocle'
            >
                重新定位
            </router-link>
        </div>
        <!-- 城市的二级联动 -->
        <City/>
    </div>
</template>

<script>
import City from "./City"
export default {
    components:{
        City,
    }
}   
</script>

<style lang="scss" scoped>
    .city{
        overflow: hidden;
        width:100%;
        .key_city{
            display: flex;
            background:#fff;
            width:100%;
            padding:20px;
            border-bottom:1px solid #eee;
            .key_input{
                display: flex;
                padding-left:5px;
                background:#f5f2f2;
                border-radius: 20px;
                height:36px;
                align-items: center;
                overflow: hidden;
                flex: 1;
                .key_img{
                    margin: auto;
                    height:15px;
                    width:25px;
                    padding:0px 5px;
                    img{
                        height:100%;
                        width:100%;
                    }
                }
                input{
                    height:20px;
                    padding-left:5px;
                    border:0px;
                    flex:1;
                    border-radius:10px;
                    width: 80%;
                    background:#f5f2f2;
                }
            }
            aside{
                height:36px;
                width:40px;
                line-height:36px;
                color:blue;
                margin-left:10px;
            }
        }
        .now_city{
            // float:left;
            display: flex;
            background:pink;
            padding:0px 20px;
            height:40px;
            align-items: center;
            justify-content: space-between;
            margin-bottom:5px;
            aside{

            }
            article{
                padding:0px 10px;
                color:blue;
            }
        }
    }
</style>

